<!-- 数据操作组件 -->
<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="close"
    :width="666"
    :destroyOnClose="true"
    okText="确认重置"
    cancelText="取消重置"
  >
    <a-form-model
      ref="ruleForm"
      :model="model"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="手机号" ref="phone" prop="phone">
        <a-input
          placeholder="请输入手机号"
          size="large"
          allowClear
          v-model="model.phone"
        />
      </a-form-model-item>
      <a-form-model-item label="验证码" ref="code" prop="code">
        <div class="flex j-c-sb a-i-c">
          <a-input
            placeholder="请输入验证码"
            v-model="model.code"
            allowClear
            size="large"
            class="pr-10"
          >
          </a-input>
          <a-button
            @click="sendPhone"
            :loading="sendLoading"
            :disabled="isSend"
            >{{ isSend ? sendTime + "秒后重新发送" : "发送验证码" }}</a-button
          >
        </div>
      </a-form-model-item>
      <a-form-model-item ref="passwordVo" label="新密码" prop="passwordVo">
        <a-input
          type="password"
          placeholder="请输入密码"
          v-model="model.passwordVo"
          allowClear
          size="large"
        >
          <a-icon
            slot="prefix"
            type="lock"
            style="color: rgba(0, 0, 0, 0.25)"
          />
        </a-input>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { model, rules } from "./save";
import { cleanObject } from "@/utils/CommonUtil";
import * as AesUtil from "@/utils/AesUtil";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Modal",
  // 子组件参数列表
  props: {},
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      api: {
        detail: "/mc_server/xx/", // 详情
        save: "/mc_server/xx/save", // 新增
        update: "/mc_server/xx/update", // 修改
      },
      title: "",
      visible: false, // 数据操作组件是否打开
      disabled: false, // 是否禁用更改数据
      confirmLoading: false, // 提交按钮loading
      model, // 数据传输模型
      rules, // 数据输入校验
      labelCol: { span: 4 }, // label占位尺寸
      wrapperCol: { span: 18 }, // 输入框占位尺寸
      isSend: false,
      sendLoading: false,
      sendTimer: undefined,
      sendTime: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async sendPhone() {
      if (!this.model.phone) {
        this.$message.error("请输入手机号");
        return;
      }
      if (this.sendTime !== 0) {
        return;
      }
      this.sendLoading = true;
      const { success } = await this.$commonApi.sendPhone({
        phone: this.model.phone,
      });
      if (success) {
        this.isSend = true;
        this.$message.success("已发送");
        this.sendTime = 60;
        let that = this;
        this.sendTimer = setInterval(() => {
          that.sendTime--;
          if (that.sendTime === 0) {
            clearInterval(that.sendTimer);
            that.sendTime = 0;
            that.isSend = false;
          }
        }, 1000);
      }
      this.sendLoading = false;
    },
    async handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true;
          const rsa = await this.$commonApi.rsaPublicKey();
          if (!rsa.success) {
            this.confirmLoading = false;
            return;
          }
          const password = this.model.passwordVo;
          // AES密钥
          let aeskey = AesUtil.createAesKey();
          this.model.passwordVo = AesUtil.AESEncrypt(
            this.model.passwordVo,
            aeskey
          );
          this.model.encryptKey = AesUtil.RSAEncrypt(aeskey, rsa.result);
          const { success } = await this.$commonApi.phoneReset(this.model);
          if (success) {
            this.$message.success("重置成功,请重新登录");
            this.$emit("handleOk");
          } else {
            this.model.passwordVo = password;
          }
          this.confirmLoading = false;
        }
      });
    },
    resetForm() {
      cleanObject(this.model);
    },
    async init(id, title) {
      this.title = title;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
      });
      this.disabled = false;
      if (id) {
        this.confirmLoading = true;
        this.model.id = id;
        this.disabled = true;
        const { success, result } = await this.$request.get1(
          this.api.detail + id
        );
        if (success) {
          this.model = Object.assign(this.model, result);
        }
        this.confirmLoading = false;
      } else {
        this.resetForm();
      }
    },
    close() {
      this.visible = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
</style>